<template>
  <div class="global">
    <form class="config-form">
      <div class="form-group">
        <label>提示词</label>
        <textarea class="polish-prompt" v-model="prompt" placeholder="请输入续写提示词" />
        <div class="button-group">
          <button type="button" class="save-btn" @click="saveConfig()">保存</button>
          <button type="button" class="get-select-btn" @click="conWrite()">续写</button>
        </div>
      </div>
      <div class="form-group">
        <label label>思考</label>
        <textarea id="think" readonly v-model="think" />
      </div>
      <div class="form-group">
        <label label>续写内容</label>
        <textarea id="after-polish-content" v-model="afterPolish" placeholder="点击续写按钮生成内容" />
      </div>

      <div class="button-group">

        <button type="button" @click="writeWordContent()" class="test-btn">确定选用</button>
        <button type="button" class="cancel-btn">取消</button>
      </div>
    </form>
  </div>
</template>

<script type="text/javascript">
import deepseek from './js/llm/deepseek.js'
import fileutils from './js/fileutil.js'
export default {
  name: 'LlmConfigTp',
  data() {
    return {
      prompt: '你是一个文档编辑助手,现在用户选定了部分内容需要你进行优化，请从通顺、逻辑等方面进行优化改写，直接返回优化后的内容。',
      selectedContent: '',
      think: "",
      afterPolish: ''
    }
  },
  mounted() {
    this.prompt = fileutils.getItem(fileutils.CON_WRITE_PROMPT_KEY)
    this.getSelect()
  },
  methods: {
    saveConfig() {
      fileutils.setItem(fileutils.CON_WRITE_PROMPT_KEY, this.prompt)
      wps.alert("保存成功")
    },
    getSelect() {
      const selection = window.Application.ActiveDocument.ActiveWindow.Selection
      let aRange = window.Application.ActiveDocument.Range(selection.Range.Start, selection.Range.End).Paragraphs
      // alert(aRange.Item(1).Range.Text)
      this.selectedContent = aRange.Item(1).Range.Text
    },
    callbackFunction(respMsg) {
      if (this.think.indexOf("</think>") > -1) {
        this.afterPolish += respMsg.replace(/\n/g, '');
      } else {
        this.think += respMsg;
      }

    },
    conWrite() {
      this.getSelect()
      this.think = ""
      this.afterPolish = ""
      deepseek.chatText(this.prompt, this.selectedContent, this.callbackFunction)
    },
    writeWordContent() {
      const selection = window.Application.ActiveDocument.ActiveWindow.Selection
      //selection.Range.InsertParagraphAfter()
      text = this.afterPolish
      selection.Range.Delete("")
      selection.InsertAfter(text)

    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

body {
  padding: 2rem;
  background-color: #f5f5f5;
}

.config-form {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #333;
  font-weight: 500;
}

input,
textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

textarea {
  height: 250px;
}

#think {
  height: 200px;
}

.polish-prompt {
  height: 160px;
}

input:focus {
  outline: none;
  border-color: #2196F3;
  box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.1);
}

.button-group {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

button {
  flex: 1;
  padding: 0.3rem 0.5rem;
  width: 100%;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s ease;
}

.save-btn {
  background-color: #2196F3;
  color: white;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #666;
}

.test-btn {
  background-color: #4CAF50;
  color: white;
}

button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
</style>
